<template>
<div>
  <div><input v-model="searchMsg"><mybut @click="search" show-icon icon="icon-sousuo"></mybut></div>
  <mybut @click.native="$refs.simpleDialog.visible=true">添加</mybut>
  <simpleDialog ref="simpleDialog" @confirm="addArticle"></simpleDialog>
  <simpleDialog ref="editDialog" @confirm="editItem"></simpleDialog>
<div class="title">
<div class="item">文章ID</div>
<div class="item">文章标题</div>
<div class="item">文章名称</div>
<div class="item">作者</div>
<div class="item">操作</div> 
</div>
<div>
  <div class="content"  v-for="(obj,index) in articleList" :key="index">
    <div class="item">{{obj.id}}</div>
    <div class="item">{{obj.title}}</div>
    <div class="item">{{obj.label}}</div>
    <div class="item">{{obj.author}}</div>
    <div class="item">
      <mybut @click="shiwEdutDualog(index)">编辑</mybut>
      <mybut @click="deleteArticle(index)">删除</mybut>
    </div>
  </div>
</div> 
</div>
</template>

<script>
import mybut from '../lesson9/mybut.vue';
import SimpleDialog from './SimpleDialog.vue';
export default {
  components: { mybut, SimpleDialog },
  data() {
    return {
      articleList:[
                {
                    id:"001",
                    title:"习近平谈治国理政",
                    label:"政治",
                    author:"习近平",
                    checked:false
                },
                {
                    id:"002",
                    title:"明朝那些事",
                    label:"历史",
                    author:"当时明月",
                    checked:false
                },
                {
                    id:"003",
                    title:"Vue.x",
                    label:"计算机",
                    author:"尤雨溪",
                    checked:false
                },
            ],      articleList2:[
                {
                    id:"001",
                    title:"习近平谈治国理政",
                    label:"政治",
                    author:"习近平",
                    checked:false
                },
                {
                    id:"002",
                    title:"明朝那些事",
                    label:"历史",
                    author:"当时明月",
                    checked:false
                },
                {
                    id:"003",
                    title:"Vue.x",
                    label:"计算机",
                    author:"尤雨溪",
                    checked:false
                },
            ],editIndex:0,searchMsg:"",allChecked:false
    };
  },
  methods: {
    addArticle(item){
      this.articleList.push(item);
    },
    deleteArticle(index){
      this.articleList.splice(index,1)
    },
    editItem(data){
      for(let key in data){
        this.articleList[this.editIndex][key]=data[key];
      }
    },
    shiwEdutDualog(index){
      this.editIndex=index;
      this.$refs.editDialog.show(this.articleList[index]);
    },
    search(){
      if(this.searchMsg){
        this.articleList=this.articleList2.filter((item)=>{
          return item.title===this.searchMsg;
        });
      }else{
        this.articleList=this.articleList2;
      }
    }
  }
};
</script>

<style scoped>
.title{
    display: flex;
    background: #f2f2f2;
    border-bottom: 1px solid #eee;
    padding: 0 10px;
    text-align: center;
}
.content{
    display: flex;
    background: white;
    border-bottom: 1px solid #eee;
    padding: 0 10px;
    text-align: center;
}
.item{
  background: #eee;
  flex: 1;
  height: 50px;
  line-height: 50px;
}
</style>